var start_view = function(){
    var that = this;
    this.renderLatestBill = function(Bill){
        $('#current-bill h4').html(Bill.getName());
    }  
};

var showBill_view = function(){
    var that = this;
    this.showBill = function(Bill){
        $("[data-role=header] h4").html(Bill.getName());
    }  
};

var billStart_view = function(){
    var that = this;
    this.renderBillsList = function(billsList){
        var markUp = '<ul data-role="listview" data-theme="a" data-inset="true"  data-split-icon="delete" data-split-theme="b">';
        markUp += '<li data-role="list-divider">no items added yet</li>';
        var billsListLength = billsList.length;
        if(billsListLength > 0){
            
            markUp = '<h3>my last ' + billsListLength + ' bills</h3>';
            markUp += '<ul data-role="listview" data-theme="a" data-inset="true" data-icon="grid">';
            for(var i=0;i<billsListLength;i++){
                var billObj = billsList[i];
                markUp += that.makeBillListItem(billObj.getName(), billObj.getIdent(), billObj.getDateCreated());
            }
            markUp += '</ul>';
        }
        $('#bills-start-list').html(markUp);
        $('#bills-start-list ul').listview();
        $('#bills-start').trigger('create');
        
        $('#bills-start-list li').bind('tap', function(event){
            var ident = $(this).attr('data-ident');
            AppInstance.setBillToShow(ident, true);
        });
        
    };  
    
    this.makeBillListItem = function(name, ident, dateCreated){
        var listItem =  '<li data-ident="' + ident + '">' +
                            '<a href="#">' +
                                '<h2>' + name + '</h2>' + 
                                '<p>' + new Date(dateCreated).toString('dddd, MMM d,yyyy') + '</p>' +
                            '</a>' +
                        '</li>';
        return listItem;
    };
};

var billsArchive_view = function(){
    var that = this;
    this.renderBillsList = function(billsList){
        var markUp = '<ul data-role="listview" data-theme="a" data-inset="true"  data-split-icon="delete" data-split-theme="b">';
        markUp += '<li data-role="list-divider">no items added yet</li>';
        if(billsList.length > 0){
            markUp = '<ul data-role="listview" data-theme="a" data-inset="true" data-filter="true" data-icon="grid">';
            for(var i=0;i<billsList.length;i++){
                var billObj = billsList[i];
                markUp += that.makeBillListItem(billObj.getName(), billObj.getIdent(), billObj.getDateCreated());
            }
            markUp += '</ul>';
        }
        $('#bills-archive-list').html(markUp);
        $('#bills-archive-list ul').listview();
        $('#bills-archive').trigger('create');
        
        $('#bills-archive-list li').bind('tap', function(event){
            var ident = $(this).attr('data-ident');
            AppInstance.setBillToShow(ident, true);
        });
        
    };  
    
    this.makeBillListItem = function(name, ident, dateCreated){
        var listItem =  '<li data-ident="' + ident + '">' +
                            '<a href="#">' +
                                '<h2>' + name + '</h2>' + 
                                '<p>' + new Date(dateCreated).toString('dddd, MMM d,yyyy') + '</p>' +
                            '</a>' +
                        '</li>';
        return listItem;
    };
};

var addPerson_view = function(){
    var that = this;
    this.addpersonField = function(){
        var currCount = $('#form-add-person-field-list input:text').length;
        var newIdSuffix = currCount + 1;
        var markUp = '<li data-role="fieldcontain">' + 
                        '<p>' +
                            '<label for="person-name-'+newIdSuffix+'">name:</label>' + 
                            '<input type="text" id="person-name-'+newIdSuffix+'" name="person-name-'+newIdSuffix+'"/>' +
                        '</p>' +
                    '</li>';
        $(markUp).insertBefore($('#add-person-more-people-link-cont'));
        $('#form-add-person-field-list').listview('refresh');
        $('#form-add-person li').fieldcontain('refresh'); 
        $('#person-name-'+newIdSuffix+'').textinput();
    };
    
    this.addPeopleSelector = function(personsList){
        var markUp = 'no people added yet';
        $('#add-person-added-people').html(markUp);
        if(personsList.length > 0){
            $('#add-person-added-people').html('<li data-role="list-divider">added people already:</li>');
            for(var i=0;i<personsList.length;i++){
                var personObj = personsList[i];
                var listItem = this.makePersonListItem(personObj.getName(), personObj.getIdent(), i);
                $('#add-person-added-people').append(listItem);
                
            }
        }
        $('#add-person-added-people').listview('refresh');
    };
    
    this.makePersonListItem = function(name, localIdent, iter){
        var markUp = '<li><a href="#" id="'+localIdent+'">' + 
                        '<h3>' + 
                            name + 
                        '</h3>' +
                    '</a>' +   
                    '<a href="#">' + 
                        'remove' + 
                    '</a></li>';  
        return markUp;
    };
};

var addItem_view = function(){
    var that = this;
    
    this.addPeopleSelector = function(personsList){
        var markUp = 'no people added yet';
        $('#item-sharers').html(markUp);
        if(personsList.length > 0){
            $('#item-sharers').html('<legend>who will share?:</legend>');
            for(var i=0;i<personsList.length;i++){
                var personObj = personsList[i];
                var checkBoxField = this.makePersonCheckBoxField(personObj.getName(), personObj.getDbIdent(), i);
                $('#item-sharers').append(checkBoxField);
                
            }
        }
        $("#add-item").trigger ("create");
    };
    
    this.makePersonCheckBoxField = function(name, dBIdent, iter){
        var idSuffix = iter;
        var markUp =    '<input type="checkbox" name="item-person-chk-'+idSuffix+'" id="item-person-chk-'+idSuffix+'" value="'+dBIdent+'"/>' + 
                        '<label for="item-person-chk-'+idSuffix+'">'+name+'</label>';
            
        return markUp;
    };
};
